<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="邵铭">
    <title></title>
    <link rel="stylesheet" type="" href="css/index.css">
    <style>

    </style>
</head>

<body>
    <header>
        <div class="head">
            <div class="container head-info">
                <div class="adress">
                    <div class="henan">河南
                        <section class="jiantou"></section>
                    </div>

                    <div class="adress-box">
                        <span class="corver c-first"></span>
                        <p class="adr">请选择所在的收货地区</p>
                        <p>A</p>
                        <p>B</p>
                        <p>C</p>
                        <p>F</p>
                        <p>G</p>
                        <p>H</p>
                        <p>J</p>
                        <p>L</p>
                        <p>N</p>
                        <p>Q</p>
                        <p>S</p>
                        <p>T</p>
                        <p>X</p>
                        <p>Y</p>
                        <p>Z</p>
                        <ul class="city">
                            <li><a href="#">安徽</a><a href="">澳门</li>
                            <li><a href="#">北京</a></li>
                            <li><a href="#">重庆</a></li>
                            <li><a href="#">福建</a></li>
                            <li><a href="#">广东</a><a href="#">广西</a><a href="">贵州</a><a href="">甘肃</a></li>
                            <li><a href="#">广东</a><a href="#">广西</a><a href="">贵州</a><a href="">甘肃</a></li>
                            <li><a href="#">广东</a><a href="#">广西</a><a href="">贵州</a><a href="">甘肃</a></li>
                            <li><a href="#">辽宁</a></li>
                            <li><a href="#">内蒙古</a><a href="">宁夏</a></li>
                            <li><a href="#">青海</a></li>
                            <li><a href="#">广东</a><a href="#">广西</a><a href="">贵州</a><a href="">甘肃</a></li>
                            <li><a href="#">台湾</a><a href="#">天津</a></li>
                            <li><a href="#">广东</a><a href="#">广西</a><a href="">贵州</a><a href="">甘肃</a></li>
                            <li><a href="#">云南</a></li>
                            <li><a href="#">浙江</a></li>
                        </ul>

                    </div>
                </div>
                <div class="head-right">
                    <ul class="h-right">
                        <li class="bg-white">
                            <a href="#">请登录</a>
                            <span class="xie"></span>
                            <div class="login  bg-border">
                                 <span class="corver c-second"></span>
                                <span class="log"></span>
                                <p>
                                    <a href="#">您好！[请登录]</a>
                                </p>
                                <section>
                                    <a href="">我的收藏</a><br>
                                    <a href="">零钱</a><br>
                                    <a href="">我的唯品币</a>
                                </section>
                                <section>
                                    <a href="">我的订单 </a>
                                    <br>
                                    <a href="">我的优惠券</a>
                                    <br>
                                    <a href="">唯品金融</a>
                                </section>
                            </div>
                        </li>
                        <li><a href="#">注册</a><span class="xie"></span></li>
                        <li>
                            <a href="#">
                                <section class="lihe"></section>签到有礼</a><span class="xie"></span>
                            <div class="qiandao">
                                <span class="gray"></span>
                                <span class="gray"></span>
                                <span class="gray"></span>
                                <span class="gray"></span>
                                <span class="gray"></span>
                                <span class="gray"></span>
                                <span class="gray"></span>
                                <hr>
                                <div class="q-day">
                                    <span class="day">1天</span>
                                    <span class="day">2天</span>
                                    <span class="day">3天</span>
                                    <span class="day">4天</span>
                                    <span class="day">5天</span>
                                    <span class="day">6天</span>
                                    <span class="day">7天</span>
                                </div>
                                <div class="q-bottom">
                                    <a href="#" class="xia">每天签到送惊喜，连续签到更享心动奖励</a>
                                    <span class="qd">签到</span>
                                </div>
                            </div>
                        </li>
                        <li><a href="#">我的订单</a><span class="xie"></span></li>
                        <li class="bg-white"><a href="#">我的特卖 </a>
                            <section class="jiantou jr"></section><span class="xie"></span>
                            <div class="active  bg-border">
                                <span class="corver"></span>
                                <p><a href="#">品牌收藏(0)</a></p>
                                <p><a href="#">商品收藏(0)</a></p>
                                <p><a href="#">我的足迹(0)</a></p>
                            </div>
                        </li>
                        <li class="bg-white"><a href="#">会员俱乐部 </a>
                            <section class="jiantou jr"></section><span class="xie"></span>
                            <div class="active  bg-border change1">
                               <span class="corver c-three"></span>
                                <p><a href="#">俱乐部首页</a></p>
                                <p><a href="#">唯品币兑换</a></p>
                                <p><a href="#">免费抽大奖</a></p>
                            </div>
                        </li>
                        <li class="bg-white">
                            <a href="#">客户服务</a>
                            <section class="jiantou jr"></section><span class="xie"></span>
                            <div class="active  bg-border">
                                <span class="corver"></span>
                                <p><a href="#">联系客服</a></p>
                                <p><a href="#">帮助中心</a></p>
                                <p><a href="#">服务中心</a></p>
                                <p><a href="#">知识产权投诉</a></p>
                            </div>
                        </li>
                        <li class="bg-white">
                            <a href="#">
                                <section class="phone"></section>手机版</a><span class="xie"></span>
                            <div class="erweima  bg-border">
                                <span class="corver c-four"></span>
                                <img src="./img/1466134037230.jpg" alt="">
                                <p>
                                    随时逛 及时抢
                                </p>

                            </div>
                        </li>
                        <li class="bg-white"><a href="#">更多</a>
                            <section class="jiantou jr"></section>
                            <div class="active more  bg-border">
                                <span class="corver c-five"></span>
                                <h5>合作专区</h5>
                                <p>
                                    <a href="">联名卡申请</a>
                                    <a href="">唯品卡</a>
                                    <a href="">支付专区</a>
                                </p>
                                <h5>合作专区</h5>
                                <p>
                                    <a href="">联名卡申请</a>
                                    <a href="">唯品卡</a>
                                    <a href="">支付专区</a>
                                </p>
                            </div>
                        </li>

                    </ul>
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <div class="container">
            <div class="main-head">
                <div class="mhead-left">
                    <img src="./img/1496219375910.png" alt="">
                </div>
                <div class="mhead-right">
                    <img src="./img/1466131264367.png" alt="">
                    <img src="./img/1466131266290.png" alt="">
                    <img src="./img/1466131268726.png" alt="">
                    <div class="shopping">
                        <div class="gouwu">
                            <span class="gouwudai"></span>
                            <a href="">我的购物袋</a>
                            <div class="clear"></div>
                        </div>
                        <div class=" shop">
                            <p>好像还未登录！<a href="">马上登录</a> 查看购物袋吧！</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <nav>
        <div class="container allnav">
            <ul class="nav-list">
                <li><a href="#">首页</a></li>
                <li><a href="#">唯品国际</a></li>
                <li><a href="#">母婴</a></li>
                <li><a href="#">家居家电</a></li>
                <li><a href="#">男士</a></li>
                <li><a href="#">美妆</a></li>
                <li><a href="#">生活超市</a></li>
                <li><a href="#">金融</a></li>
                <li>
                    <a href="#">更多</a>
                    <section class="jiantou jwhite"></section>
                    <div class="more-m">
                        <ul class="more-list">
                            <li>
                                <a href="#">
                                    <img src="./img/1467620677036.jpg" alt="">
                                    <div class="hezi">
                                        <span class="shadow"></span>
                                        <p>女装</p>
                                    </div>
                                </a>
                            </li>

                            <li>
                                <a href="#"><img src="./img/1467620750077.jpg" alt="">
                                    <div class="hezi">
                                        <span class="shadow"></span>
                                        <p>鞋包</p>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./img/1467620773404.jpg" alt="">
                                    <div class="hezi ">
                                        <span class="shadow"></span>
                                        <p>配饰</p>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./img/1467620790247.jpg" alt="">
                                    <div class="hezi yundong">
                                        <span class="shadow"></span>
                                        <p>运动</p>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="./img/1467620841997.jpg" alt="">
                                    <div class="hezi weipin">
                                        <span class="shadow"></span>
                                        <p>唯品·奢</p>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>

                </li>

            </ul>
            <ul class="nav-right">
                <li><img src="./img/1470377526197.png">分类</li>
                <li><img src="./img/1470377501079.png">预告</li>
            </ul>
        </div>
    </nav>
    <main>
        <div class="mtop"></div>
        <div class="container mbox">
            <div class="box">
                <ul class="img-list">
                    <li class="current">
                        <a href="#"><img src="./img/lunbo02.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="./img/lunbo03.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="./img/lunbo04.jpg" alt=""></a>
                    </li>
                </ul>
                <ul class="indicator">
                    <li class="m-active">时尚风暴 最高满199减40</li>
                    <li>时尚风暴 最高满199减40</li>
                    <li>时尚风暴 最高满199减40</li>
<i class="red-border"></i>
                </ul>
                <div class="img-click">
                    <span class="prev">&lt;</span>
                    <span class="next">&gt;</span>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="m-img">
                <div class="photo">
                    <img src="./img/1502078817176.jpg" alt=""><span class="king"></span>
                    <img src="./img/1502078828997.jpg" alt=""><span class="king two"></span>
                    <img src="./img/1502078840972.jpg" alt=""><span class="king three"></span>
                </div>
                <div class="m-new">
                    <img src="./img/title_v2.jpg" alt="">
                </div>
            </div>
        </div>
    </main>
    <div class="aside">
        <ul class="a-top">
            <li class="account">
                <span class="zhanghao"></span>
                <div class="z-box">
                    <img src="./img/inte_close.png" alt="" class="x"></img>
                    <div class="zbox-top">
                        <img src="./img/download.jpg" alt="">
                        <p>你好！请<a href="#">登录</a>|<a href="#">注册</a></p>
                    </div>
                    <div class="zbox-main">
                        <div class="zbox-m zbox-ml">
                            <span></span>
                            <p>我的订单</p>
                        </div>
                        <div class="zbox-m zbox-mr">
                            <span></span>
                            <p>我的消息</p>
                        </div>
                    </div>
                    <section>会员俱乐部</section>
                </div>
            </li>
            <li>
                <div class="s">
                    <sapn class="s-top"></sapn>
                    <section>购物袋</section>
                    <span class="s-bottom">0</span>
                </div>
            </li>
            <li>
                <span class="quan"></span>
                <div class="q">
                    <p>我的优惠券</p>
                </div>
            </li>
            <li>
                <span class="quan xin"></span>
                <div class="q xp">
                    <p>品牌收藏</p>
                </div>
            </li>
            <li>
                <span class="quan star"></span>
                <div class="q st">
                    <p>商品收藏</p>
                </div>
            </li>
            <li>
                <span class="quan zu"></span>
                <div class="q zj">
                    <p>我的足迹</p>
                </div>
            </li>
        </ul>
        <ul class="a-bottom">
            <li>
                <span class="quan pen"></span>
                <div class="pe">
                    <p>会员反馈</p>
                </div>
            </li>
            <li class="return-top">
                <span class="quan aqtop"></span>
                <div class="pe tp">
                    <p>返回顶部</p>
                </div>
            </li>
        </ul>
    </div>

    <footer>

    </footer>
</body>

</html>
<script>

    window.onload = function () {
        var box = document.querySelector('.box');
        var imgLis = document.querySelectorAll('.img-list li');
        var indicatorLis = document.querySelectorAll('.indicator li');
        var prev = document.querySelector('.prev');
        var next = document.querySelector('.next');
        var redBorder = document.querySelector('.red-border');
        var index = 0;
        function prevImg() {
            index =
                index == 0 ? index = imgLis.length - 1 : index - 1;
        }
        function nextImg() {
            index =
                index == imgLis.length - 1 ? 0 : index + 1;
            showImg();
        }
        function showImg() {
            for (var i = 0; i < imgLis.length; i++) {
                imgLis[i].className = '';
                indicatorLis[i].className = '';
            }
            imgLis[index].className = 'current';
            indicatorLis[index].className = 'm-active';
          redBorder.style.left =
           indicatorLis[index].offsetWidth*index + 'px';
lastIndex = index;
}
        var timer = setInterval(nextImg, 2000);
        for (var i = 0; i < indicatorLis.length; i++) {
            indicatorLis[i].index = i;
            indicatorLis[i].onmouseover = function () {
                clearInterval(timer);
                timer = null;
                index = this.index;
                showImg();
            }
            indicatorLis[i].onmouseout = function () {
                if (timer != null) {
                    return;
                }
                timer = setInterval(nextImg, 2000);
            }
        }
        box.onmouseover = function () {
            clearInterval(timer);
            timer = null;
            prev.style.display = 'block';
            next.style.display = 'block';
        }
        box.onmouseout = function () {
            if (timer != null) {
                return;
            }
            timer = setInterval(nextImg, 2000);
            prev.style.display = 'none';
            next.style.display = 'none';
        }
        prev.onclick = function () {
            prevImg();
            showImg();
        }
        next.onclick = function () {
            nextImg();
        }

    }

    var returnTop = document.querySelector('.return-top');
    returnTop.onclick = function () {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
    }

// ===================头部导航
var mainNav = document.querySelector('nav');
function mainFixed(){
    if (document.scrollingElement.scrollTop >= 130) {
        mainNav.style.position = 'fixed';
        mainNav.style.left = '0px';
        if (mainNav.style.top != 0) {
            setTimeout(function(){      
                mainNav.style.top = '0px';
            },100);
        }
    }else{
        mainNav.style.position = 'static';
        mainNav.style.top = 
        -2*mainNav.offsetHeight + 'px';
    }
}
window.onscroll = mainFixed;

var close=document.querySelector('.x');
var zbox=document.querySelector('.z-box');
var account = document.querySelector('.a-top>li.account');
account.onmouseover = function(){
    zbox.style.left = -zbox.offsetWidth + 'px';
}
account.onmouseout = function(){
    zbox.style.left = 0;
}
close.onclick = function(){
    zbox.style.left = 0;
}

</script>